import React, { Component } from 'react';
import axios from 'axios'

class Aa extends Component{
    state={
        user:"",
        isSearch:false, //判读是否是搜索状态
    }

    componentWillReceiveProps(props){
        let searchText=props.searchText;
        let url=`https://api.github.com/search/users?q=${searchText}`;
        axios.get(url)
            .then(res=>{
                let users=res.data.items.map((item,index)=> ({
                        name:item.login,
                        headPortrait:item.avatar_url ,
                        homepage:item.html_url
                    })
                )
                this.setState({
                    user:users,
                    isSearch:true,
                })
            }).catch(err=>{
                console.log(err.message);
            })
    }

    render(){
        let {user}=this.state;
        if(!this.state.isSearch){
            return  <p>请输入搜索的关键字...</p>  
        }else{
            return (
                <div className="list">
                    {user.map((item,index)=>(
                        <div className="item" key={index}>
                            <a href={item.homepage} target="_blank">
                            <img src={item.headPortrait} alt=""/>
                            <p>{item.name}</p>
                            </a>
                        </div>
                    ))}
                </div> 

            )
        }

  
        
    }
    
}
export default Aa